<template>
    <div>
        <van-nav-bar title="电子票据" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                <div>
                    <span style="margin-left: 20px;">{{ ii.name }}</span>
                    <span style="margin-left: 20px;">{{ ii.ma }}</span>
                </div>
                <div style="
                display: flex;
                " @click="g4">
                    <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 115px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                        alt="">
                    <p style="
                        margin-left: 2px;
                    ">切换</p>
                </div>

            </div>
            <p style="
                        font-weight: 700;
                        font-size: 14px;
                        margin-left: 15px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        ">发票列表</p>

            <div style="
        width:100%;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        overflow-y: auto;
        position: relative;
        ">
                <p style="
          font-weight: 600;
          height: 18px;
          border-left: 5px solid #0091ff;
          line-height: 18px;
          margin-top: 15px;
          display: flex;
          ">
                    <span style="margin-left: 10px;font-size: 14px;">门诊发票<span class="green">已开具</span></span>
                </p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 0px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">就诊人：<span style="color: #000000;">王小柯</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">票据号：<span style="color: #000000;">0050745821</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">业务类型：<span style="color: #000000;">门诊挂号</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 65%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">开票时间：<span style="color: #000000;">2020-01-01 10:20:36</span></p>
                <button style="
                width:100px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                border-radius: 7px;
                background-color: white;
                color: white;
                margin-left: 230px;
                margin-top: 10px;
                border: none;
                border: 1.5px solid #1677ff;
                color: #1677ff;
                " @click="open">发送邮箱</button>
                <img style="
                position: absolute;
                right: 10px;
                top: 45px;
                width: 60px;
                height: 39px;
                
                " src="https://cdn7.axureshop.com/demo/2208121/images/%E7%94%B5%E5%AD%90%E7%A5%A8%E6%8D%AE/u3820.png"
                    alt="">
                <span style="
                position: absolute;
                right: 15px;
                top: 76px;
                font-size: 12px;
                color:#AAAAAA;
                ">点击预览</span>
            </div>

            <div style="
        width:100%;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        overflow-y: auto;
        ">
                <p style="
          font-weight: 600;
          height: 18px;
          border-left: 5px solid #0091ff;
          line-height: 18px;
          margin-top: 15px;
          display: flex;
          ">
                    <span style="margin-left: 10px;font-size: 14px;">门诊发票<span class="green1">已冲红</span></span>
                </p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 0px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">就诊人：<span style="color: #000000;">王小柯</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">票据号：<span style="color: #000000;">0050745821</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 45%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">业务类型：<span style="color: #000000;">门诊挂号</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                margin-top: -20px;    
                text-align: left;
                font-size: 14px;
                width: 65%;
                display: flex;
                margin-left: 15px;
                justify-content: space-between;
                ">开票时间：<span style="color: #000000;">2020-01-01 10:20:36</span></p>


            </div>
            <p style="
            text-align: center;
            font-size: 14px;
            color:#7F7F7F;
            margin-top: 15px;
            ">默认加载近三个月内的发票</p>




        </div>
    </div>

    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">选择就诊人</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
            <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                <span style="margin-left: 20px;">{{ i.name }}</span>
                <span style="margin-left: 20px;">{{ i.ma }}</span>
            </div>



        </div>

    </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';




const open = () => {
    ElMessageBox.prompt('  ', '请确认邮箱发送地址', {
        confirmButtonText: '确定发送',
        cancelButtonText: '取消',
        inputPattern:
            /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '输入错误，请输入正确的邮箱地址',
    })
        .then(({ value }) => {
            // 将value发送到后端
            axios.get('http://127.0.0.1:3000/getemail', {
                params: {
                    mail: value
                }
            })
                .then(response => {
                    if(response.data.code==200){
                        ElMessage({
                            type: 'success',
                            message: `Ok了`,
                        })
                    }else{
                        ElMessage({
                            type: 'error',
                            message: `发送失败，请重新输入邮箱地址`,
                        })
                    }
                })
                .catch(error => {
                    console.error(error);
                });


            ElMessage({
                type: 'success',
                message: `Your email is:${value}`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Input canceled',
            })
        })
}


const count = ref(1)


const qw = () => {
    count.value = 1
}
const qw1 = () => {
    count.value = 2
}
const qw2 = () => {
    count.value = 3
}





const router = useRouter()
const de90 = () => {
    router.push("/Q1")
}
const sdf23 = () => {
    router.push("/Q2")
}
const ii = ref({
    name: "王小轲",
    ma: "2015*****10"
})
const showBottom = ref(false)

const renmen = ref([
    {
        name: "王小轲",
        ma: "2015*****10"
    },
    {
        name: "李玲玲",
        ma: "2015*****11"
    },
])
let flags = ref(true)
const flagsw = () => {
    flags.value = true
}
const flagsw1 = () => {
    flags.value = false
}
const dian = (i: any) => {
    ii.value = i
    showBottom.value = false

}


const onClickLeft = () => history.back();


const g4 = () => {
    showBottom.value = true
}





</script>

<style scoped>
.q1 {
    width: 114px;
    height: 41px;
    background-color: rgba(22, 119, 255, 1);
    border: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: rgba(242, 242, 242, 1);
    font-size: 14px;
}

.q2 {
    width: 114px;
    height: 41px;
    background-color: rgb(255, 255, 255);
    border: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: rgb(0, 0, 0);
    font-size: 14px;
}

.q3 {
    width: 114px;
    height: 41px;
    background-color: rgba(22, 119, 255, 1);
    border: 0;
    color: rgba(242, 242, 242, 1);
    font-size: 14px;
}

.q4 {
    width: 114px;
    height: 41px;
    background-color: rgb(255, 255, 255);
    border: 0;
    color: rgb(0, 0, 0);
    font-size: 14px;
}

.q5 {
    width: 114px;
    height: 41px;
    background-color: rgba(22, 119, 255, 1);
    border: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: rgba(242, 242, 242, 1);
    font-size: 14px;
}

.q6 {
    width: 114px;
    height: 41px;
    background-color: rgb(252, 252, 252);
    border: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: rgb(0, 0, 0);
    font-size: 14px;
}

.qwerg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: white;
    color: black;
}

.activ1d1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.green1 {
    background-color: #fff1f0;
    color: #f5222d;
    font-size: 12px;
    font-weight: 400;
    font-size: 12px;
    margin-left: 220px;
}

.green {
    background-color: #e6fffb;
    color: #13c2c2;
    font-size: 12px;
    font-weight: 400;
    font-size: 12px;
    margin-left: 220px;
}

.qwe111rg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    color: black;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.activd1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
</style>